import React, {PureComponent} from 'react';
import {Button, Form, Input, Modal, Popconfirm, Table} from "antd";
import {getCollectorList, updateCollector} from "../../api/collector";
import "./index.css"
import HandleAlarm from "../MonitoringList/HandleAlarm";

const tableHead = {
	"id": "ID",
	"name": "采集点名称",
	"collector_type_display": "采集点类型",
	"mount_status_display": "状态"
}

let columns = [], oldValue, page = 1
const pageSize = 10

class Index extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: [],
			editId: "",
			dataCount: 0,
			searchTxt: "",
			loading: true
		}
	}

	onSearchTxtChange = (e) => {
		this.setState({
			searchTxt: e.target.value
		})
		console.log(e.target.value)
	}

	onSearch = async () => {
		page = 1
		await this.initTable()
		console.log('search');
	}

	componentDidMount = async () => {
		this.setTableHead()
		await this.initTable()
	}

	initTable = async () => {
		try {
			const res = await getCollectorList({page, pageSize, name: this.state.searchTxt})
			this.setState({dataSource: res.results, dataCount: res.count})
		} catch (e) {
			throw e
		} finally {
			this.setState({loading: false})
		}
	}

	changeCollectorName(record, value) {
		let i = record['id']
		const {dataSource: ds} = this.state
		const newDS = [...ds]
		newDS.splice(i - 1, 1, {...record, name: value})
		this.setState({
			dataSource: newDS
		})
	}

	saveData = async (record) => {
		console.log(this.props)
		// const [form] = Form.useForm();
		// const values = await form.validateFields();
		this.props.form.validateFields({}, (err, values) => {
			// console.log(err
			if (err) {
				return false
			} else {
				this.setState({editId: ""})
				updateCollector(record)
			}
		});
	}

	setTableHead() {
		const {getFieldDecorator} = this.props.form;
		columns = [];
		Object.keys(tableHead).map(key => {
			const column = {
				title: tableHead[key],
				dataIndex: key,
				key
			}
			if (key === 'name') {
				column.width = "340px"
				column.render = (text, record) => {
					if (this.state.editId == record.id) {
						return (
							<Form layout={'inline'}>
								<Form.Item>
									{getFieldDecorator('collectorName', {
										rules: [{required: true, message: '请输入采集点名称'}],
										initialValue: text
									})(<Input style={{width: '300px'}}
									          onKeyDown={e => {
										          if (e.keyCode == 13) {
											          this.saveData(record)
										          }
									          }}
									          onChange={(e) => {
										          this.changeCollectorName(record, e.target.value)
									          }}
									/>)}
								</Form.Item>
							</Form>
						)
					} else {
						return (
							<span>{text}</span>
						)
					}
				}
			}
			columns.push(column)
		})
		/*
				columns.push({
					title: '操作',
					key: 'action',
					width: '180px',
					render: (text, record) => {
						let {editId} = this.state
						return (
							<span>
					{/!*根据editid设置编辑、保存、撤销按钮*!/}
								<a style={{display: editId == '' ? '' : 'none'}} onClick={() => {
									oldValue = record.name
									this.setState({editId: record.id})
								}}
								>
					编辑
					</a>
					<a style={{display: editId == record.id ? '' : 'none'}} onClick={() => this.saveData(record)}>
					保存
					</a>
					<Popconfirm
						title="撤销编辑吗?"
						onConfirm={() => {
							this.changeCollectorName(record, oldValue)
							this.setState({
								editId: ""
							})
						}}>
					<a style={{marginLeft: '20px', display: this.state.editId == record.id ? '' : 'none'}}>撤销</a>
				  </Popconfirm>
				</span>
						)
					}
				})
		*/
	}

	render() {
		return (
			<>
				<Form layout={"inline"}>
					<Form.Item label="采集点名称">
						<Input placeholder="请输入采集点名称" style={{width: '200px'}} onChange={this.onSearchTxtChange}/>
					</Form.Item>
					<Form.Item>
						<Button type="primary" icon={'search'} onClick={this.onSearch}>
							搜索
						</Button>
					</Form.Item>
				</Form>
				<div style={{marginTop: '50px'}}>
					<Table rowKey={'id'} bordered loading={this.state.loading}
					       dataSource={this.state.dataSource} columns={columns}
					       pagination={{
						       current: page,
						       pageSize: pageSize,
						       total: this.state.dataCount,
						       onChange: (pageNum, pageSize) => {
							       page = pageNum
							       this.initTable()
						       }
					       }}
					/>
				</div>
			</>
		)
	}
}

Index.propTypes = {};
const WrappedEditCollectorNameForm = Form.create({name: 'edit_collector_name'})(Index);
export default WrappedEditCollectorNameForm;

